import { useDocumentTitle } from "../../hooks/useDocumentTitle";
import {
  useBillboardsInProject,
  useProjectInUrl,
  useSearchTasks,
} from "./utils";
import { Spin } from "antd";
import { BillboardColumn } from "./BillboardColumn";
import styled from "@emotion/styled";
import { TaskSearchPanel } from "./TaskSearchPanel";
import { ScreenContainer } from "../../components/ScreenContainer";
import { CreateBillboard } from "./CreateBillboard";
import { TaskModal } from "./TaskModal";
import { DragDropContext } from "react-beautiful-dnd";
import { Drag, Drop } from "../../components/DragAndDrop";
import { useDragEnd } from "./useDragEnd";

const BillboardContainer = styled.div`
  display: flex;
  flex: 1;
  overflow-x: scroll;
`;

export const BillboardScreen = () => {
  useDocumentTitle("看板列表", false);
  const { data: project } = useProjectInUrl();
  const { data: kanbans, isLoading: isBillboardsLoading } =
    useBillboardsInProject();
  const { isLoading: isTasksLoading } = useSearchTasks();
  const isLoading = isBillboardsLoading || isTasksLoading;
  const onDragEnd = useDragEnd();
  return (
    <ScreenContainer>
      <h2>{project?.name}看板</h2>
      <TaskSearchPanel />
      {isLoading ? (
        <Spin size="large" />
      ) : (
        <DragDropContext onDragEnd={onDragEnd}>
          <BillboardContainer>
            <Drop
              droppableId="kanbans"
              type="COLUMN"
              direction="horizontal"
              style={{ display: "flex" }}
            >
              {kanbans?.map((kanban, index) => (
                <Drag
                  draggableId={"kanban-" + kanban.id}
                  index={index}
                  key={kanban.id || "optimistic"}
                  style={{ display: "flex" }}
                >
                  <BillboardColumn billboard={kanban} />
                </Drag>
              ))}
            </Drop>
            <CreateBillboard key="createBillboard" />
          </BillboardContainer>
          <TaskModal />
        </DragDropContext>
      )}
    </ScreenContainer>
  );
};
